<template>
    <view class="page">
        <view class="page-form">
            <view class="page-form-head">
<!--                <img src="/static/img/timg.jpg" />-->
                <view class="img">
                    <img v-if="logoInfo.url.length>0" :src="logoInfo.url" @click="changeAvatar"/>
<!--                    <img class="icon" :src="File_Url+'vip-icon.png'" v-if="is_vip==1" />-->
                </view>
            </view>
<!--            <view class="page-form-item">-->
<!--                <text>昵称</text>-->
<!--                <input type="text" placeholder="请输入您的昵称" v-model="nickname"/>-->
<!--            </view>-->
            <view class="page-form-item">
                <text>姓名</text>
                <input type="text" placeholder="请输入您的姓名" v-model="realname"/>
            </view>
<!--            <view class="page-form-item">-->
<!--                <text>微信号</text>-->
<!--                <input type="text" placeholder="请输入您的微信号" v-model="weChatNumber"/>-->
<!--            </view>-->
            <button class="page-form-item" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                <text>手机号</text>
                <!--<input type="text" :disabled="is_phone" :class="{'grey':is_phone}" placeholder="请输入您的联系电话" v-model="phoneNumber"/>-->
                <!--<input type="text" :disabled="is_phone" :class="{'grey':is_phone}" placeholder="授权" v-model="phoneNumber"/>-->
                <text class="phone-get" v-if="phoneNumber">{{phoneNumber}}</text>
                <text class="phone-get" style="color: #3782FF" v-if="!phoneNumber">授权</text>
            </button>
            <view class="page-form-item">
                <text>所在企业</text>
                <input type="text" placeholder="请输入您所在的企业名称" v-model="companyName"/>
            </view>
            <view class="page-form-item">
                <text>岗位</text>
                <input type="text" placeholder="请输入您的岗位名称" v-model="companyPost"/>
            </view>
<!--            <view class="page-form-item">-->
<!--                <text>联系电话</text>-->
<!--                <input type="number" placeholder="请输入您的手机号" v-model="phoneNumber"/>-->
<!--            </view>-->
            <view class="page-form-item">
                <text>所在地区</text>
                <picker class="item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
                    <view class="picker-item">
                        <text :class="{'grey':region[0]==''}">{{region[0]==''?'请选择所在地区':(region[0][region[0].length-1]=='市'?(region[0]+region[2]):(region[0]+region[1]+region[2]))}}</text>
<!--                        <text>{{region[2]==''?(region[1]==''?region[0]:region[1]):region[2]}}</text>-->
                        <img :src="File_Url+'right-grey.png'" />
                    </view>
                </picker>
            </view>
            <view class="page-form-item">
                <text>邮箱</text>
                <input type="text" placeholder="请输入您的邮箱" v-model="email"/>
            </view>
            <view class="page-form-item">
                <text>行业</text>
                <picker class="item-picker" mode="selector" :value="industryItem" :range="industry" @change="industryChange" @columnchange="industryColumnChange">
                    <view class="picker-item">
                        <text :class="{'grey':industryItem==null}">{{industryItem==null?'请选择行业':(industry[industryItem].length>10?(industry[industryItem]||'').substr(0,10)+'...':industry[industryItem])}}</text>
                        <img :src="File_Url+'right-grey.png'" />
                    </view>
                </picker>
            </view>
        </view>
        <view class="page-btn">
            <button @click="setUserInfo">提交</button>
        </view>

        <!--弹窗提醒用户绑定手机号-->
        <!--<view class="phone-mode" v-if="getPhoneShow" @click.stop="getPhoneShow=false">
            <view class="phone-content" @click.stop>
                <view class="phone-title">获取微信绑定手机</view>
                <view class="phone-content">
                    是否获取微信授权获取绑定手机号？
                </view>
                <view class="phone-btn">
                    <button @click="getPhoneShow=false">取消</button>
                    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button>
                </view>
            </view>
        </view>-->
    </view>
</template>

<script>
    export default {
        name: "editInfo",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                getPhoneShow: false,
                region: ['', '', ''],
                customItem: '全部',
                industryList: [],
                industry: [],
                industryItem: '',
                nickname:'',
                weChatNumber:'',
                phoneNumber:'',
                logoInfo:{}, //头像信息
                is_vip: 0,
                realname: '',
                companyName: '',
                companyPost: '',
                code: '',
                is_phone: true,
                email:''
            }
        },
        onShow(){
            this.getIndustryList();
            this.getUserInfo();
        },
        methods:{
            //获取行业列表
            async getIndustryList(){
                const res = await this.$api.getIndustryList();
                if (res.data.level == 'success'){
                    this.industryList = res.data.data;
                    for (let i = 0;i< this.industryList.length; i++) {
                        this.industry.push(this.industryList[i].name);
                    }
                }else {
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }
            },
            //修改头像
            async changeAvatar(){
                let res=await this.$currency.upLoadImage(this,'file/upload-img')
                let data=JSON.parse(res.data)
                if(data.level!='success'){
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }else {
                    this.logoInfo={
                        url:data.data.img_url,
                        id:data.data.id
                    }
                }
            },
            //获取个人信息
            async getUserInfo(){
                let userToken=uni.getStorageSync('userToken')
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.nickname = res.data.data.user_info.nickname;
                    this.phoneNumber = res.data.data.phone;
                    this.weChatNumber = res.data.data.user_info.wechat;
                    this.logoInfo = {
                        url: res.data.data.user_info.photo_url,
                        id: res.data.data.user_info.photo_id
                    }
                    this.region[0] = res.data.data.user_info.province;
                    this.region[1] = res.data.data.user_info.city;
                    this.region[2] = res.data.data.user_info.area;
                    this.is_vip = res.data.data.user_info.is_vip;
                    this.companyName = res.data.data.user_info.company_name;
                    this.companyPost = res.data.data.user_info.position;
                    this.realname = res.data.data.user_info.realname;
                    this.email = res.data.data.user_info.email;
                    if (res.data.data.user_info.industry_id == 0){
                        console.log("aa")
                        this.industryItem = null;
                    } else{
                        console.log("bb")
                        this.industryItem = res.data.data.user_info.industry_id;
                        this.industryItem--;
                        if (this.industryItem == 0){
                            this.industryItem = this.industryItem.toString();
                        }
                    }
                    if (this.phoneNumber == null){
                        this.getPhoneShow = true;
                        this.is_phone = false;
                        uni.login({
                            success: res =>{
                                this.code = res.code
                            }
                        })
                    }
                }
            },
            //获取微信绑定的手机号
            async getPhoneNumber (e) {
                this.getPhoneShow = false;
                if (e.detail.errMsg != 'getPhoneNumber:fail user deny') {
                    let params = {
                        user_token: uni.getStorageSync('userToken'),
                        code: this.code,
                        encryptedData: e.detail.encryptedData,
                        iv: e.detail.iv
                    }
                    const res = await this.$api.getWeChatPhone(params);
                    if (res.data.level == 'success'){
                        let phone = JSON.parse(res.data.data);
                        this.phoneNumber = phone.phoneNumber;
                    }
                }

            },
            //绑定微信获取的手机号
            async directBindingPhone(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    phone: this.phoneNumber
                }
                const res = await this.$api.directBindingPhone(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    setTimeout(function () {
                        uni.navigateBack({
                            delta:1
                        })
                    },1500)
                }else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message
                    })
                }

            },
            //设置个人信息
            async setUserInfo(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    nickname: this.nickname,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    industry_id: this.industryItem==null?'':this.industryList[this.industryItem].id,
                    photo_id: this.logoInfo.id,
                    realname: this.realname,
                    company_name: this.companyName,
                    position: this.companyPost,
                    email: this.email
                }
                const res = await this.$api.setUserInfo(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    let _this = this;
                    setTimeout(function () {
                        if (_this.is_phone){
                            uni.navigateBack({
                                delta:1
                            })
                        } else {
                            _this.directBindingPhone();
                        }

                    },1500)
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 1500
                    })
                }
            },
            regionChange(e){
                console.log(e)
                let str = [];
                for (let i = 0; i< e.detail.value.length; i++){
                    if (e.detail.value[i]=='全部'){
                        str[i] = '';
                    } else {
                        str[i] = e.detail.value[i];
                    }
                }
                this.region = str;
            },
            industryChange(e){
                console.log(e)
                this.industryItem = e.detail.value;
            },
            industryColumnChange(e){
                if (e.detail.column == 0){
                    console.log(e)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        width: 100vw;
        min-height: 100vh;
        @include flex(flex-start);
        flex-direction: column;
    }
    .page-form{
        width: 100vw;
        background: #FFFFFF;
        button{
            line-height: 1;
            margin:0;
            background-color: #ffffff;
            border-radius: 0;
        }
        button::after{
            border:none;
            border-radius: 0;
        }
        .page-form-head{
            padding: 30rpx;
            @include flex();
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            .img{
                width: 184rpx;
                height: 184rpx;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 360rpx;
                }
                .icon{
                    position: absolute;
                    right: -5rpx;
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
        .page-form-item{
            padding: 38rpx 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 1rpx solid #E5E5E5;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            input{
                margin-left: auto;
                max-width: 70%;
                text-align: right;
                @include ellipsis(1)
            }
            .phone-get{
                margin-left: auto;
                max-width: 70%;
                text-align: right;
                @include ellipsis(1)
            }
            .item-picker{
                margin-left: auto;
                width: 70%;
                .picker-item{
                    @include flex(flex-end);
                    flex-direction: row;
                    width: 100%;
                    text{
                        max-width: calc(100% - 35rpx);
                        overflow: hidden;
                        height: 45rpx;
                        line-height: 45rpx;
                        @include ellipsis(1);
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                        margin-left: 5rpx;
                        vertical-align: middle;
                    }
                }

            }
        }
    }
    .page-btn{
        margin-top: auto;
        width: calc(100vw - 60rpx);
        padding: 60rpx 30rpx;
        button{
            width: 100%;
            background: #3782FF;
            border-radius: 44rpx;
            height: 88rpx;
            line-height: 88rpx;
            color: #FFFFFF;
        }
    }
    .phone-mode{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        min-height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        @include flex();
        flex-direction: column;
        .phone-content{
            overflow: hidden;
            width: 80vw;
            background: #ffffff;
            border-radius: 16rpx;
            .phone-title{
                line-height: 100rpx;
                height: 100rpx;
                text-align: center;
                border-bottom: 1rpx solid #eee;
            }
            .phone-content{
                padding: 30rpx;
                width: calc(100% - 60rpx);
                line-height: 50rpx;
                text-align: center;
                font-size: 28rpx;
            }
            .phone-btn{
                @include flex();
                flex-direction: row;
                width: 100%;
                button{
                    width: 50%;
                    background: #ffffff;
                    font-size: 32rpx;
                    border-radius: 0;
                }
                button::after{
                    border-radius: 0;
                }
            }
        }
    }
    .grey{
        color: #848484;
    }
</style>
